.person {
  .actorInfo {
    @apply w-full relative;
    font-size: 0;
    min-height: 41vw;
    padding: 5rem 3.375rem 2.5rem;

    &::after {
      @apply absolute w-full left-0;
      height: 6.25rem;
      bottom: -3.75rem;
      content: '';
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #141414 100%);
    }

    .actorBox {
      @apply flex pb-5;

      .actorImg {
        @apply shrink-0 mr-7 mt-4;
        width: 19.167vw;
        border-radius: 0.375rem;

        & > img {
          @apply w-full h-auto rounded;
          aspect-ratio: 99/149;
        }
      }

      .actor-info {
        @apply mt-5 text-sm text-c99 px-4;

        .name {
          @apply text-2xl leading-10 text-white font-black;
          font-family: Songti SC;
          font-size: 2.5rem;
          margin-top: 0.9375rem;
          margin-bottom: 2.5rem;
        }

        .p {
          @apply text-base leading-4 mb-5;

          & > span:nth-child(1) {
            @apply text-white-60;
            margin-right: 1.875rem;
          }

          & > span:nth-child(2) {
            @apply text-white;
          }
        }

        .info {
          @apply text-base text-white leading-7 overflow-hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 4;
          &.infoOpen {
            -webkit-line-clamp: 1000;
          }
        }

        .open {
          @apply flex items-center text-theme mt-2 h-5 cursor-pointer;
          .img {
            @apply ml-2;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .personPhone {
    font-family: Alibaba PuHuiTi 2;

    .actorInfo {
      @apply rounded w-screen py-5 px-0;
      background: transparent !important;

      &::after {
        height: 0rem;
        bottom: 0rem;
      }

      .actorBox {
        @apply flex-col pb-0;

        .actorImg {
          @apply mr-0 w-full relative;

          & > img {
            height: 117.33vw;
          }

          &::after {
            @apply absolute left-0 bottom-0 w-full z-0;
            content: '';
            height: 9.375rem;
            background: linear-gradient(180deg, rgba(20, 20, 20, 0) 0%, #141414 100%);
          }
        }

        .actor-info {
          @apply z-1;
          margin-top: -2.5rem;

          .name {
            @apply text-2xl mb-5 mt-3 leading-6;
          }

          .p {
            @apply text-sm leading-4 mb-3;

            & > span:nth-child(1) {
              @apply mr-2;
            }

            & > span:nth-child(2) {
              @apply text-white-60;
            }
          }

          .pPhone {
            @apply text-white mb-3 text-base leading-4;

            span {
              @apply mr-2;
            }
          }

          .info {
            @apply text-sm text-white-60 leading-7;
          }
        }
      }

      .pPhone {
        @apply text-sm text-white leading-4 mt-2 text-white-60;
      }
    }
  }
}
